<template>
	<div class="container">
		<div class="numdiv">
			<div class="num1">
				<div class="num2">总数</div>
				<div class="num3">{{all}}</div>
			</div>
			<div class="num1 numleft">
				<div class="num2">库存</div>
				<div class="num3">{{exist}}</div>
			</div>
			<div class="num1 numleft">
				<div class="num2">出库</div>
				<div class="num3">{{leave}}</div>
			</div>
			<div class="num1 numleft">
				<div class="num2">损耗</div>
				<div class="num3">{{loss}}</div>
			</div>
		</div>
		<div class="chartdiv">
			<div class="chart1">
				<chartblock ref="chart2"></chartblock>
			</div>
			<div class="chart2">
				<chartblock ref="chart3"></chartblock>
			</div>
		</div>
	</div>
</template>

<script>
	let option2 = {
		title: {
			text: '物资统计',
			left: 'center'
		},
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b} : {c} ({d}%)'
		},
		legend: {
			orient: 'vertical',
			left: 'left',
			data: ['库存', '出库', '损耗']
		},
		series: [{
			name: '物资统计',
			type: 'pie',
			radius: '55%',
			center: ['50%', '60%'],
			data: [
				// { value: 523, name: '库存' },
				// { value: 0, name: '出库' },
				// { value: 4, name: '损耗' }
			],
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			}
		}]
	}
	let option3 = {
		title: {
			text: '物资分类',
			left: 'center'
		},
		legend: {
			orient: 'vertical',
			left: 'left',
			data: ['库存', '出库', '损耗']
		},
		grid:{
			top:'20%',
			bottom:'15%'
		},
		tooltip: {},
		dataset: {
			source: [
				['分类', '库存', '出库', '损耗'],
				// ['防护用品', 43.3, 85.8, 93.7],
				// ['生命救助', 83.1, 73.4, 55.1],
				// ['生命支持	', 86.4, 65.2, 82.5],
				// ['工程设备', 72.4, 53.9, 39.1],
				// ['临时食宿', 72.4, 53.9, 39.1]
			]
		},
		xAxis: { 
			type: 'category',
			axisLabel: {
				// x轴文字的配置
				show: true,
				interval: 0,// 使x轴文字显示全
				rotate: 35
			}
		},
		yAxis: {},
		series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
	};
	export default {
		data(){
			return {
				all:0,
				exist:0,
				loss:0,
				leave:0
			}
		},
		mounted() {
			axios.get('/admin/tongjidata').then(res => {
				let all=0,exist=0,loss=0,leave=0
				res.data.data.forEach((item,index)=>{
					option3.dataset.source.push([item.goods.name,item.warehouse,item.leave_warehouse,item.loss_warehouse])
					all+=parseInt(item.income_warehouse)
					exist+=parseInt(item.warehouse)
					loss+=parseInt(item.loss_warehouse)
					leave+=parseInt(item.leave_warehouse)
				})
				this.all=all
				this.exist=exist
				this.leave=leave
				this.loss=loss
				this.$refs.chart3.setOption(option3)
				option2.series=[{
					name: '物资统计',
					type: 'pie',
					radius: '55%',
					center: ['50%', '60%'],
					data: [
						{ value: exist, name: '库存' },
						{ value: leave, name: '出库' },
						{ value: loss, name: '损耗' }
					],
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}]
				this.$refs.chart2.setOption(option2)
			}).catch(function(err) {
				console.log(err)
			})
			
			
		},
		
	}
</script>

<style>
	.container {
		width: 97%;
		height: 100%;
		margin: 0 auto 15px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.numdiv {
		width: 100%;
		margin: 15px auto;
		height:90px;
		border: 1px solid #ccc;
		border-radius: 10px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		box-sizing: border-box;
	}

	.chartdiv {
		width: 100%;
		margin: 0 auto;
		flex: 1;
		padding:20px 10px;
		display: flex;
		flex-direction: row;
		box-sizing: border-box;
	}

	.chart1 {
		flex: 1;
		--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	}

	.chart2 {
		flex: 2;
		margin-left:25px;
		--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	}

	.num1 {
		flex: 1;
		height: 80%;
	}
	.numleft{
		border-left: 1px solid #ccc;
	}

	.num2 {
		width: 100%;
		height: 45%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 15px;
		color: #888;
	}

	.num3 {
		width: 100%;
		height: 55%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 600;
		font-size: 16px;
	}
</style>
